<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>会员登录</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css"/>
  <script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js" type="text/javascript"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap-3.1.1.min.js" type="text/javascript"></script>
  <!-- 引入自定义css文件 style.css -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css"/>

  <style>
    body {
      margin-top: 20px;
      margin: 0 auto;
    }

    .carousel-inner .item img {
      width: 100%;
      height: 300px;
    }

    .container .row div {
      /* position:relative;
      float:left; */
    }

    font {
      color: #666;
      font-size: 22px;
      font-weight: normal;
      padding-right: 17px;
    }
  </style>
</head>
<body>

<jsp:include page="head.jsp"/>

<div class="container"
     style="width:100%;height:460px;background:#FF2C4C url('${pageContext.request.contextPath}/images/loginbg.jpg') no-repeat;">
  <div class="row">
    <div class="col-md-7">
      <!--<img src="/image/login.jpg" width="500" height="330" alt="会员登录" title="会员登录">-->
    </div>

    <div class="col-md-5">
      <div style="width:440px;border:1px solid #E7E7E7;padding:20px 0 20px 30px;border-radius:5px;margin-top:60px;background:#fff;">
        <font>会员登录</font> <span style="color: red" id="warn"></span>

        <div>&nbsp;</div>
        <form class="form-horizontal">

          <div class="form-group">
            <label for="username" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-6">
              <input type="text" class="form-control" id="username" placeholder="请输入用户名"
                     name="username">
            </div>
          </div>
          <div class="form-group">
            <label for="password" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-6">
              <input type="password" class="form-control" id="password" placeholder="请输入密码"
                     name="password">
            </div>
          </div>
          <div class="form-group">
            <label for="verification" class="col-sm-2 control-label">验证码</label>
            <div class="col-sm-3">
              <input type="text" class="form-control" id="verification" placeholder="请输入验证码"
                     name="verification">
            </div>
            <div class="col-sm-3">
              <img id="img" onclick="changeimg(this)" src="${pageContext.request.contextPath}/user/code.do"/>
              <a href="#" id="wengzi" style="font-size: 15px">看不清,换一张</a>
            </div>

          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <label>
                  <a href="">忘记密码</a>
                </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label>
                  <input type="checkbox"> 记住用户名
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <input type="button" id="btn" width="100" value="登录" name="submit" border="0"
                     style="background: url('${pageContext.request.contextPath}/images/login.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height:35px;width:100px;color:white;">
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<jsp:include page="foot.jsp"/>
</body>
<script>

  $("#wengzi").click(function () {
    $("#img").attr("src","${pageContext.request.contextPath}/user/code.do?i=" + Math.random());
    console.log($("#img").src);
  })

  function changeimg(obj) {
    obj.src = "${pageContext.request.contextPath}/user/code.do?i=" + Math.random();

  }

  $("#btn").click(function () {
    $.get("${pageContext.request.contextPath}/user/login.do",
        {
          username: $("#username").val(),
          password: $("#password").val(),
          verification: $("#verification").val()
        },
        function (d) {
          if (d.msc == 0) {
            $("#warn").html("登录错误，请确认输入的验证码");
          } else if (d.msc == -1) {
              $("#warn").html("登录错误，请确认输入的用户名和密码");
          } else if(d.msc == -2){
              $("#warn").html("登录错误，请确认用户是否已激活");
          } else {
            location.href = "${pageContext.request.contextPath}/index.jsp";
          }
        }
    )
  })


</script>

</html>